<template>
  <a-drawer
    :title='title'
    :maskClosable='true'
    :width='drawerWidth'
    placement='right'
    :closable='true'
    @close='handleCancel'
    :visible='visible'
    style='height: 100%;overflow: auto;padding-bottom: 53px;'>

    <template slot='title'>
      <div style='width: 100%;'>
        <span>{{ title }}</span>
      </div>

    </template>

    <a-spin :spinning='confirmLoading'>
      <a-form-model ref='form' :model='model' :rules='validatorRules'>
        <a-form-model-item label='项目类别' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='type'>
          <j-dict-select-tag style='width: 100%' v-model='model.type' placeholder='请选择' dict-code='pro_type'
                             :disabled='disableSubmit' />
        </a-form-model-item>
        <a-form-model-item label='计划项目名称' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='name'>
          <a-input v-model='model.name' :disabled='disableSubmit' />
        </a-form-model-item>
        <a-form-model-item label='被审计机构名称' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='mechanismName'>
          <a-input v-if='organShow' v-model='model.mechanismName' @click.native='openOrganModel' placeholder='点击选择'
                   :disabled="disableSubmit || status=='5'"></a-input>
        </a-form-model-item>
        <a-form-model-item label='计划开始时间' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='startDate'>
          <a-date-picker
            style='width:100%'
            dropdownClassName="j-date-picker"
            :disabled="disableSubmit || status=='5'"
            placeholder="请选择计划开始时间"
            v-model='model.startDate'
            :disabled-date="disabledStartDate"
          />
        </a-form-model-item>
        <a-form-model-item label='计划结束时间' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='endDate'>
          <a-date-picker
            style='width:100%'
            dropdownClassName="j-date-picker"
            :disabled="disableSubmit || status=='5'"
            placeholder="请选择计划结束时间"
            v-model='model.endDate'
            :disabled-date="disabledEndDate"
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <div class='drawer-bootom-button' v-show='!disableSubmit'>
      <a-popconfirm title='确定放弃编辑？' @confirm='handleCancel' okText='确定' cancelText='取消'>
        <a-button style='margin-right: .8rem'>取消</a-button>
      </a-popconfirm>
      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>提交</a-button>
    </div>

    <OrganModal ref='departModal' @ok='updateQueryParam'></OrganModal>
  </a-drawer>
</template>

<script>
import { httpAction } from '@/api/manage'
import OrganModal from '../../components/OrganModal'
import moment from 'moment'

export default {
  name: 'UserModal',
  components: {
    OrganModal
  },
  props: {
    status: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      departDisabled: false, //是否是我的部门调用该页面
      roleDisabled: false, //是否是角色维护调用该页面
      modalWidth: 800,
      drawerWidth: 700,
      confirmDirty: false,
      userId: '', //保存用户id
      disableSubmit: false,
      dateFormat: 'YYYY-MM-DD',
      validatorRules: {
        type: [{ required: true, message: '请选择项目类别!' }],
        name: [{ required: true, message: '请输入计划项目名称!' }],
        mechanismName:[{required: true, message: '请选择被审计机构名称!'}],
        startDate: [{ required: true, message: '请选择计划开始时间!' }],
        endDate: [{ required: true, message: '请选择计划结束时间!' }]
      },
      departIdShow: false,
      title: '操作',
      visible: false,
      model: {
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      headers: {},
      url: {
        add: '/sjzyzhgl/sjPlanProjectInfo/add',
        edit: '/sjzyzhgl/sjPlanProjectInfo/edit'
      },
      nextDepartOptions: [],
      organShow: true,
      proId:'',
      openStyle:null
    }
  },
  created() {

  },
  computed: {
    uploadAction: function() {
      return this.url.fileUpload
    }
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.model.endDate
      if (!endValue) {
        return startValue && startValue < moment().subtract(1, 'days').endOf('day')
      }
      return (startValue.valueOf() > endValue.valueOf()) || (startValue && startValue < moment().subtract(1, 'days').endOf('day')) || startValue.valueOf() > moment(endValue.valueOf()).subtract(1, 'days').endOf('day')
    },
    disabledEndDate(endValue) {
      const startValue = this.model.startDate
      if (!startValue) {
        return endValue && endValue < moment().endOf('day')
      }
      return (startValue.valueOf() >= endValue.valueOf()) || (endValue && endValue < moment().endOf('day'))|| endValue.valueOf() < moment(startValue.valueOf()).endOf('day')
    },
    openOrganModel() {
      this.$refs.departModal.show()
    },
    updateQueryParam(data) {
      this.model.mechanismName = data.departName
      this.model.mechanismId = data.id
      this.organShow = false
      this.$nextTick(() => {
        this.organShow = true
      })
      this.$refs.form.validateField('mechanismName', (error) => {
        console.log(error)
      })
    },
    add() {
      this.model = {
        mechanismName: ''
      }
      this.visible = true
    },
    check(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
      this.nextDepartOptions = []
      this.departIdShow = false
      this.$refs.form.resetFields()
    },
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) { // 新建一行新的数据
            httpurl += this.url.add
            method = 'post'
            this.model.operating = '0'
          } else { // 编辑某一行的信息
            httpurl += this.url.edit
            method = 'put'
          }
          let formData = Object.assign({ proId: this.proId }, this.model)
          //时间格式化
          // formData.esSendTime = formData.esSendTime ? formData.esSendTime.format('YYYY-MM-DD HH:mm:ss') : null;
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
